<template>
    <div>
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-notice-bar left-icon="volume-o" text="风尚女装 秋冬新品 朗姿时装周秀场同款 全网首发 不止5折~" />
        <div class="box">
            <img :src="info.img" style="margin-bottom: 20px" />
            <div>{{ info.goodsname }}</div>
            <div style="color: red; font-size: 30px; margin-top: 20px">
                ¥{{ info.goodsprice }}
            </div>
            <div style="margin-top: 10px">销量:{{ info.goodsnum }}</div>
        </div>
    
        <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsId" :quota="quota" :quota-used="quotaUsed" :hide-stock="sku.hide_stock" :message-config="messageConfig" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" />
    
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import vuex from "vuex";
import { goodsQuery } from "@/model/goodsModel";
export default {
    data() {
        return {
            info: {},
            show: false,
            sku: {
                // 数据结构见下方文档
            },
            goods: {
                // 数据结构见下方文档
            },
            messageConfig: {
                // 数据结构见下方文档
            },
        };
    },
    destroyed() {
        this.changeFlag(true)
    },
    methods: {
        ...vuex.mapMutations(["changeFlag"]),
        onClickLeft() {
            this.$router.back();
        },

    },
    async created() {
        let res = await goodsQuery({
            id: this.$route.params.id,
        });
        this.changeFlag(false);
        this.info = res.data[0];

    },
};
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 300px;
}

.box {
    font-size: 18px;
}
</style>